<template>
  <x-tabs v-model="formData" :config="formConfig">
    <template #sex="{ config }">
      <x-table
          v-model="searchData"
          :config="config"
          :data="tableData"
          :page="page"
      />
    </template>
    <template #sex1="{ config }">
      <x-table
          v-model="searchData"
          :config="config"
          :data="tableData"
          :page="page"
      />
    </template>
    <template #customField>
      <el-button>AAAAA</el-button>
    </template>

    <template #labelThree>
      <span>自定义标签页面</span>
    </template>
  </x-tabs>

<!--  <el-tabs v-model="formConfig.activeTab">-->
<!--    <el-tab-pane-->
<!--        name="labelOne"-->
<!--        :label="getTabItemConfig('labelOne').label"-->
<!--        v-if="computeBoolean(getTabItemConfig('labelOne').show, true)"-->
<!--    >-->
<!--      <x-form-->
<!--          v-if="computeBoolean(getTabItemConfig('labelOne').item[0].show, true)"-->
<!--          v-model="formData.labelOne"-->
<!--          :config="getTabItemConfig('labelOne').item[0]">-->

<!--      </x-form>-->
<!--    </el-tab-pane>-->
<!--    <el-tab-pane-->
<!--        name="labelTwo"-->
<!--        :label="getTabItemConfig('labelTwo').label"-->
<!--        v-if="computeBoolean(getTabItemConfig('labelTwo').show, true)"-->
<!--    >-->
<!--      <x-form v-model="formData.labelTwo" :config="getTabItemConfig('labelTwo').item[0]">-->
<!--        <template #sex="{ config }">-->
<!--          <x-table-->
<!--              v-model="searchData"-->
<!--              :config="config"-->
<!--              :data="tableData"-->
<!--              :page="page"-->
<!--          />-->
<!--        </template>-->
<!--      </x-form>-->
<!--    </el-tab-pane>-->
<!--  </el-tabs>-->
</template>

<script>
import mixin from "@/form/mixin";
import { merge } from 'lodash'


export default {
  name: "TestForm",

  mixins: [mixin],

  data() {
    const _this = this
    return {
      formData: {
        // labelOne: {
        //   username: 'AAA',
        //   status: 'enable' // 默认数据
        // },
        // labelTwo: {}
      },

      collectData: '',

      treeData: [{
        id: '1',
        name: 'xx公司',
        children: [
          {
            id: '2',
            name: '技术部',
            children: [
              { id: '4', name: 'Java 组' },
              { id: '5', name: 'Web 组' },
              { id: '6', name: 'PHP 组' },
              { id: '7', name: 'Python 组' }
            ]
          },
          { id: '3', name: '售后部' }
        ]
      }],

      //子表单配置数据
      loading: false,
      tableData: [
        { name: '张三', sex: 'male', phone: 13222222222 },
        { name: '李四', sex: 'female', phone: 13222222222 },
        { name: '王二', sex: 'male', phone: 13222222222 },
        { name: '麻子', sex: 'female', phone: 13222222222 }
      ],
      page: {
        pageSizes: [10, 20],
        pageSize: 10,
        pageNum: 1,
        total: 4
      },
      searchData: {},
    }
  },

  methods: {
    formConfigProvide() {
      const _this = this
      return {
        xType: 'tabs',
        label: '定制化表单',
        name: 'form',
        activeTab: 'labelOne',
        item: [
          {
            xType: 'tabPanel',
            name: 'labelOne',
            label: '标签一',
            show: true,
            item: [
              {
                xType: 'form',
                name: 'formOne',
                label: '表单一',
                show: true,
                inline: false,
                labelSuffix: ':',
                rowGutter: 10,
                item: [
                  {
                    xType: 'input',
                    name: 'username',
                    label: '登录名',
                    show: true,
                    tooltip: '登录名的<br />提示信息',
                    rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
                    colSpan: 12
                  },
                  {
                    xType: 'datePicker',
                    type: 'date',
                    name: 'birthday',
                    show: true,
                    label: '生日',
                    rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
                    colSpan: 12
                  },
                  {
                    xType: 'select',
                    type: 'tree',
                    name: 'deptId',
                    show: true,
                    label: '部门', dic: { data: _this.treeData, label: 'name', value: 'id' },
                    rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
                  },
                  {
                    xType: 'select',
                    type: 'tree',
                    name: 'deptId2',
                    show: true,
                    label: '部门多选',
                    multiple: true,
                    dic: { data: _this.treeData, label: 'name', value: 'id' },
                    rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
                  },
                  {
                    xType: 'input',
                    name: 'phone',
                    label: '手机号',
                    show: true,
                    rules: [{ required: true, pattern: /^1[3-9][0-9]{9}$/, message: '请输入正确的手机号', trigger: ['blur', 'change'] }]
                  },
                  {
                    xType: 'input',
                    name: 'email',
                    label: '邮箱',
                    show: true,
                    rules: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]
                  },
                  {
                    xType: 'select',
                    name: 'sex',
                    label: '性别',
                    show: true,
                    dic: [{ label: '男', value: 'male' }, { label: '女', value: 'female' }]
                  },
                  {
                    xType: 'select',
                    name: 'sex2',
                    label: '自定义下拉',
                    show: true,
                    dic: { data: [{ id: 1, name: '男男' }], label: 'name', value: 'id' }
                  },
                  {
                    xType: 'radio',
                    name: 'status',
                    label: '状态',
                    show: true,
                    dic: [{ label: '激活', value: 'enable' }, { label: '锁定', value: 'disable' }]
                  },
                  {
                    xType: 'checkbox',
                    name: 'hobby',
                    label: '爱好',
                    show: true,
                    dic: [{ label: '篮球', value: 'basketball' }, { label: '足球', value: 'football' }]
                  },
                  {
                    xType: 'input',
                    type: 'password',
                    name: 'password',
                    label: '密码',
                    show: true,
                  },
                  {
                    xType: 'input',
                    type: 'textarea',
                    name: 'remark',
                    label: '备注',
                    show: true,
                  }
                ]
              }
            ]
          },
          {
            xType: 'tabPanel',
            name: 'labelTwo',
            label: '标签二',
            show: true,
            item: [
              {
                xType: 'form',
                name: 'formTwo',
                label: '表单二',
                show: true,
                inline: false,
                labelSuffix: ':',
                item: [
                  {
                    xType: 'input',
                    name: 'age',
                    label: '年龄',
                    show: true,
                  },
                  {
                    slot: 'sex',
                    xType: 'table',
                    name: 'subTable',
                    label: '子表单',
                    show: true,
                    stripe: true,
                    labelWidth: '',
                    tableBtn: [ // 适合控制table的按钮
                      { text: '新增', show: true, click: () => {console.log('新增')}, icon: 'el-icon-circle-plus' }
                    ],
                    column: [
                      {label: '序号',  type: 'index', show: true},
                      {label: '名称',  name: 'name', show: true, xType: 'input'},
                      {label: '名称2', name: 'name2', show: false, xType: 'input'},
                      {label: '性别',  name: 'sex', show: true, xType: 'select',
                        dic: [
                          { label: '全部', value: '' },
                          { label: '男', value: 'male' },
                          { label: '女', value: 'female' }
                        ]
                      },
                      {label: '手机', name: 'phone', show: true, formatter: (row, column, cellValue, index) => '+86 ' + cellValue},
                    ],
                    operate: [
                      { text: '编辑', type: 'text', show: true, click: () => console.log('编辑') },
                      { text: '详情', type: 'text', show: true, click: (row, index) => console.log(row, index) }, // row当前行数据 index 当前行索引
                      { text: '更多1', dropdown: true, type: 'text', show: true, click: () => console.log('更多1') },
                      { text: '更多2', dropdown: true, type: 'text', show: true, click: row => console.log(row) },
                      { text: '更多3', dropdown: true, type: 'text', show: true, click: () => console.log('更多3') },
                    ]
                  }
                ]
              },
              {
                xType: 'card',
                name: 'customCard',
                label: '自定义卡片',
                show: true,
                headerBtn: [
                  {text: '增加', show: true}
                ],
                item: [
                  {
                    xType: 'input',
                    label: '项目名称',
                    name: 'projectName',
                    show: true,
                    colSpan: 12
                  },
                  {
                    xType: 'input',
                    label: '项目经理',
                    name: 'projectManager',
                    show: true,
                    colSpan: 12
                  },
                  {
                    xType: 'slot',
                    label: '自定义字段',
                    name: 'customField',
                    show: true
                  },
                  {
                    slot: 'sex1',
                    name: 'subTable1',
                    label: '子表单1',
                    xType: 'table',
                    show: true,
                    stripe: true,
                    labelWidth: '',
                    tableBtn: [ // 适合控制table的按钮
                      { text: '新增', show: true, click: () => {console.log('新增')}, icon: 'el-icon-circle-plus' }
                    ],
                    column: [
                      {label: '序号',  type: 'index', show: true},
                      {label: '名称',  name: 'name', show: true, xType: 'input'},
                      {label: '名称2', name: 'name2', show: false, xType: 'input'},
                      {label: '性别',  name: 'sex', show: true, xType: 'select',
                        dic: [
                          { label: '全部', value: '' },
                          { label: '男', value: 'male' },
                          { label: '女', value: 'female' }
                        ]
                      },
                      {label: '手机', name: 'phone', show: true, formatter: (row, column, cellValue, index) => '+86 ' + cellValue},
                    ],
                    operate: [
                      { text: '编辑', type: 'text', show: true, click: () => console.log('编辑') },
                      { text: '详情', type: 'text', show: true, click: (row, index) => console.log(row, index) }, // row当前行数据 index 当前行索引
                      { text: '更多1', dropdown: true, type: 'text', show: true, click: () => console.log('更多1') },
                      { text: '更多2', dropdown: true, type: 'text', show: true, click: row => console.log(row) },
                      { text: '更多3', dropdown: true, type: 'text', show: true, click: () => console.log('更多3') },
                    ]
                  }
                ]
              }
            ]
          },
          {
            xType: 'tabPanel',
            name: 'labelThree',
            label: '标签三',
            show: true,
          }
        ],
      }
    },

    getTabItemConfig(itemName) {
      if (this.formConfig.xType === 'tabs') {
        return this.formConfig.item.filter(it => it.name === itemName)?.[0]
      }
      return {}
    },

    getFormItemConfig(arr, formName) {
      if (arr && arr.length > 0) {
        return arr.filter(it => it.name === formName && it.type === 'type')?.[0]
      }
    },


    save() {
      this.loading++
      this.$refs['xForm'].validate().then(() => {
        console.log(this.formData)
      }).catch(e => console.error(e)).finally(() => this.loading--)
    },

  }
}
</script>

<style scoped>

</style>
